import React, { useEffect, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import './index.less';

interface IMessageItemProps {
    userId: string;
    message: string;
    senderName: string;
    avatar: string;
    time: string;
}

export default function MyMessage() {
    const navigate = useNavigate();
    const [data, setData] = useState<IMessageItemProps[]>([]);

    function deleteMessage() {
        // delete
        alert('删除消息功能暂未开发');
    }

    function entryDetailMessage(e: React.MouseEvent<HTMLDivElement, MouseEvent>) {
        if (!(e.target instanceof HTMLElement)) return;
        const { id } = e.target.dataset;
        const messageItem = data.find((item) => item.userId === id);
        if (!messageItem) return;
        // TODO: 跳转到详情页
        navigate('messageDetail', {
            state: {
                userId: id,
                avatar: messageItem.avatar,
                senderName: messageItem.senderName,
            },
        });
    }

    // 初次请求数据
    useEffect(() => {
        // TODO
        setData([
            {
                userId: '1',
                avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
                senderName: 'keqing',
                message: 'hello',
                time: '21小时前',
            },
            {
                userId: '2',
                avatar: 'https://gw.alipayobjects.com/zos/rmsportal/ThXAXghbEsBCCSDihZxY.png',
                senderName: 'keqing',
                message: 'hello，my Name is keqing',
                time: '2小时前',
            },
        ]);
    }, []);

    return (
        <div className="my-message">
            {data.map((item) => {
                return (
                    <div className="brief-message-box" key={item.userId}>
                        <div className="left-avatar">
                            <img src={item.avatar} alt="" />
                        </div>
                        <div className="right-message">
                            <div className="senderName">
                                <span className="message-sender">{item.senderName}</span>
                                <div className="time-box">
                                    <span className="message-time">{item.time}</span>
                                    <button className="delete-btn" onClick={() => deleteMessage()}>
                                        删除
                                    </button>
                                </div>
                            </div>
                            <div
                                className="message-content"
                                data-id={item.userId}
                                onClick={(e) => entryDetailMessage(e)}
                            >
                                <p>{item.message}</p>
                            </div>
                        </div>
                    </div>
                );
            })}
        </div>
    );
}
